<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>营销配置</el-breadcrumb-item>
			<el-breadcrumb-item  :to="{ path: '/appmarket' }">APP营销配置</el-breadcrumb-item>
			<el-breadcrumb-item>{{name}}</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-row>
				<el-col :span="6">
					<el-button type="primary" @click="showAdd">新增</el-button>
				</el-col>
			</el-row>
			
			<el-table :data="marketList" border stripe>
				<el-table-column label="排序" prop="sort"></el-table-column>
				<el-table-column label="标题" prop="title"></el-table-column>
				<el-table-column label="图片">
					<template slot-scope="scope">
						<img class="marketList-img" :src="scope.row.imageUrl" alt="">
					</template>
				</el-table-column>
				<el-table-column label="URL" prop="url"></el-table-column>
				<el-table-column label="创建时间" prop="createTime"></el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<el-switch
						  v-model="scope.row.isShow"
						  :active-value='1'
						  :inactive-value='0'
						  active-color="#13ce66"
						  inactive-color="#ff4949"
						  @change="statusChanged(scope.row.carouselId,scope.row.isShow)">
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="showEdit(scope.row.carouselId)" size="mini" type="primary" icon="el-icon-edit"></el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<!-- 分页 -->
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="pageCount"
			  :page-size="pageSize"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="total">
			</el-pagination>
			
			<el-dialog
			  :title="title"
			  :visible.sync="dialogVisible"
			  width="50%">
				<el-form ref="formRef" :model="listForm" label-width="120px">
					<el-form-item label="排序">
					  <el-input placeholder="输入商户序号" v-model="listForm.sort"></el-input>
					</el-form-item>
					<el-form-item label="标题">
					  <el-input placeholder="输入标题" v-model="listForm.title"></el-input>
					</el-form-item>
					<el-form-item label="跳转类型">
						<el-radio-group v-model="listForm.type">
						    <el-radio :label="1">商户ID</el-radio>
						    <el-radio :label="2">内部URL</el-radio>
						    <el-radio :label="3">外部URL</el-radio>
						 </el-radio-group>
					</el-form-item>
					<el-form-item label="URL" v-if="listForm.type == 2||listForm.type == 3">
					  <el-input placeholder="输入URL" v-model="listForm.url"></el-input>
					</el-form-item>
					<el-form-item label="shopId" v-else>
					  <el-input placeholder="输入shopId" v-model="listForm.shopId"></el-input>
					</el-form-item>
					<el-form-item label="图片">
						<el-button type="primary" size="mini" @click="chooseImage">点击上传</el-button>
						<input @change="photoChange($event)" type="file" id="upload_file" multiple style="display: none"/>
						<div v-if="listForm.imageUrl != ''">
					  		<img class="editIcon" :src="'data:image/jpeg;base64,'+listForm.imageUrl" />
						</div>
					</el-form-item>
					<el-form-item label="颜色" v-if="type==1">
					  <el-input placeholder="输入图片颜色" v-model="listForm.backgroundColor"></el-input>
					</el-form-item>
					<el-form-item label="保存后立即开启">
						<el-radio-group v-model="listForm.isShow">
						    <el-radio :label="1">立即开启</el-radio>
						    <el-radio :label="0">暂不开启</el-radio>
						 </el-radio-group>
					</el-form-item>
				</el-form>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="dialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="addSub">确 定</el-button>
			  </span>
			</el-dialog>
			
		</el-card>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				name:'首页次级广告位',
				type:3,
				marketList:[],
				total:0,
				pageSize:20,
				pageCount:1,
				title:'新增',
				dialogVisible:false,
				listForm:{},
				isAdd:false
			}
		},
		created() {
			this.type = this.$route.query.type
			switch(this.type){
				case '3':
					this.name = '首页次级广告位'
					break
				case '4':
					this.name = '借款banner'
					break
				case '1':
					this.name = '商城banner'
					break
				case '2':
					this.name = '商城次级广告位'
					break
				default:
					break
			}
			this.getList(this.$route.query.type)
		},
		methods:{
			async getList(type){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				 const {data:res} = await this.$http.post('/appMarket/list',{marketType:type,pageSize:this.pageSize,pageCount:this.pageCount})
				 // console.log(res);
				 this.marketList = res.data.records
				 this.total = res.data.total
				 setTimeout(() => {
				   loading.close();
				 }, 500);
			},
			handleSizeChange(val) {
				this.pageSize = val
				this.getList(this.type)
			},
			handleCurrentChange(val) {
				this.pageCount = val
				this.getList(this.type)
			},
			showAdd(){
				this.listForm ={"sort":null,"title":'',"url":'',"shopId":"","imageUrl":"","backgroundColor":"","isShow":1,"type":2,"marketType":this.type}
				this.title = '新增'
				this.dialogVisible = true
				this.isAdd = true
			},
			async showEdit(id){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.post('/appMarket/getById',{id:id})
				this.listForm = res.data
				var urlBase = ''
				await this.$base64Img(this.listForm.imageUrl).then((res) => {		//调用全局方法
					urlBase = res
				})
				this.listForm.imageUrl = urlBase.split(',')[1]
				this.title = '修改'
				this.dialogVisible = true
				this.isAdd = false
				setTimeout(() => {
				  loading.close();
				}, 500);
			},
			// 监听switch状态改变
			async statusChanged(id,type){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				const {data:res} = await this.$http.post('/appMarket/updateType',{id:id,type:type})
				setTimeout(() => {
				  loading.close();
				}, 500);
				if(res.code!==200) {
					tableList.status = !tableList.status
					return this.$message.error('修改贷超借款营销状态失败')
				}
			  this.$message.success('修改贷超借款营销状态成功')
			},
			chooseImage(){
				document.getElementById('upload_file').click(); //触发input-file文件上传控件 事件photoChange
　　　　　　},
			async photoChange(el) {
				var file = el.target.files[0];//name: "dangqi1.png" || type: "image/png"
				var type = file.type.split('/')[0];
				if ( type === 'image' ){
					var dataURL = await this.toBase64(file)
					this.listForm.imageUrl = dataURL.split(',')[1]
				}else{
					alert('上传了非图片');
				}
			},
			toBase64(file){
				return new Promise(function(resolve, reject) { 
					//将图片img转化为base64
					var reader = new FileReader();
					reader.readAsDataURL(file);
					reader.onloadend = function () {
						resolve(reader.result)
					};
				})
			},
			async addSub(){
				const loading = this.$loading({
				  lock: true,
				  text: 'Loading',
				  spinner: 'el-icon-loading',
				  background: 'rgba(0, 0, 0, 0.7)'
				});
				if(this.isAdd){/* 添加 */
					const {data:res} = await this.$http.post('/appMarket/save',{"sort":this.listForm.sort,"title":this.listForm.title,"url":this.listForm.url,"imageBase":this.listForm.imageUrl,"backgroundColor":this.listForm.backgroundColor,"isShow":this.listForm.isShow,"shopId":this.listForm.shopId,"type":this.listForm.type,"marketType":this.type})
					console.log(res)
					if(res.code!==200){
						return this.$message.error('添加失败')
					}else{
						this.$message.success('添加成功')
						this.dialogVisible = false
						this.getList(this.type)
					}
				}else{/* 修改 */
					const {data:res} = await this.$http.post('/appMarket/update',{"id":this.listForm.carouselId,"sort":this.listForm.sort,"title":this.listForm.title,"url":this.listForm.url,"imageBase":this.listForm.imageUrl,"backgroundColor":this.listForm.backgroundColor,"isShow":this.listForm.isShow,"shopId":this.listForm.shopId,"type":this.listForm.type,"marketType":this.type})
					console.log(res)
					if(res.code!==200){
						return this.$message.error('修改失败')
					}else{
						this.$message.success('修改成功')
						this.dialogVisible = false
						this.getList(this.type)
					}
				}
				setTimeout(() => {
				  loading.close();
				}, 500);
			}
		}
	}
</script>

<style lang="less" scoped>
	.marketList-img{
		width: 180px;
		height: 120px;
	}
	.editIcon{
		width: 180px;
		height: 120px;
	}
</style>
